<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-if和v-show的区别</title>
</head>
<body>
  <!--一、实现原理不同
        1.v-if动态地创建或移除DOM元素 控制元素在页面上的显示与隐藏
        2.v-show动态添加或移除style="display:none"; 样式从而控制显示与隐藏
      二、性能消耗不同
        1.v-if更高的切换开销 频繁切换影响性能 则使用v-show更好
        2.v-show有更高的初始渲染开销 运行条件很少改变使用v-if更好-->
       <div id="app">
         <button @click="flag=!flag">ToggleFlag</button>
         <p v-if="flag">v-if</p>
         <p v-show="flag">v-show</p>
       </div>
       <script src="./lib/vue-2.6.12.js"></script>
       <script>
         const vm=new Vue({
           el:'#app',
           data:{
             flag:true
           }
         })
       </script>
</body>
</html>